import React, { Component } from 'react';

import PubSub from "pubsub-js";

import "./index.css";

export default class List extends Component {
    state={
        users:[],
        isFirst:true,
        isLoading:false,
        err:""
    };
    componentDidMount(){
        this.token=PubSub.subscribe("atguigu",(msg,data)=>{
            // console.log(data);
            this.setState(data);
        });
    };
    componentWillUnmount(){
        PubSub.unsubscribe(this.token);
    };
    render() {
        const {users,isFirst,isLoading,err}=this.state;
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
                    isLoading ? <h2>搜索中......</h2> :
                    err ? <h2>{err}</h2> :
                    users.map((item)=>{
                        return (
                            <div className="card" key={item.id}>
                                <a rel="noreferrer" href={item.html_url} target="_blank">
                                    <img alt="avator" src={item.avatar_url} style={{ width: "100px" }} />
                                </a>
                                <p className="card-text">{item.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        );
    };
};
